<template>
  <div class="LargeScreen">
    <VonDialog
            :isShow_Popup="isShow_Popup_BDU"
            @cancelResult="cancelResult_BDU"
            @commitResult='commitResult_BDU'
            title="BDU测试机配方选择">
      <div class="deviceForm" slot="content">
        <img src="../assets/LargeScreen/largeScreen.jpg"></img>
      </div>
    </VonDialog>
    <div class="topTitle">
      <img src="../assets/LargeScreen/topTitle.png" class="backTop">
      <img src="../assets/LargeScreen/LOGO.png" class="Logo">
      <img src="../assets/LargeScreen/realTimeBoard.png" class="realTime">
      <p class="weather">
        南京&nbsp;&nbsp;&nbsp;&nbsp;{{currentTime}}
      </p>
    </div>
    <div class="content flex-evenly">
      <div>
        <span>设备名称：</span>
        <span style="color: #30C7FF">BDU自动化生产线</span>
      </div>
      <div>生产机种：{{productName}}</div>
      <div>
        <span>日期：</span>
        <span style="color: #FF8400">{{currentDate}}</span>
      </div>
    </div>
    <div class="realShowArea">
      <el-row>
        <el-col :span="12">
          <div class="realShowAreaItem">
            <div class="realShowAreaItemTop">
              <div class="tableBox">
                <div>
                  <img src="../assets/LargeScreen/productLine.png" alt="">
                </div>
                <div class="table1 table">
                  <img src="../assets/LargeScreen/gun.png" alt=""  style="transform: scale(0.95) translateY(14px);">
                </div>
              </div>
            </div>
            <div class="realShowAreaItemBottom">
              <div class="tableBox">
                <div>
                  <img src="../assets/LargeScreen/help.png" alt="">
                </div>
                <div class="table1 table">
                  <img src="../assets/LargeScreen/alarm.png" alt="">
                  <div class="trans">
                    <el-carousel height="100px" direction="vertical" :interval="3000" :autoplay="true" indicator-position="none">
                      <el-carousel-item v-for="(item,_index) in helpInfos" :key="_index">
                        <p>注意：{{item.workStationName}}工位发生求助,请及时处理.</p>
                      </el-carousel-item>
                    </el-carousel>

                  </div>
                </div>
              </div>
              <div class="tableBox">
                <div>
                  <img src="../assets/LargeScreen/recipe.png" alt="">
                </div>
                <div class="table2 table">
                  <div class="table2Top">
                    <!--                                       <span>有料</span>-->
                    <span>无料</span>
                  </div>
                  <div class="table2Bottom">
                    <!--                                       <DoubleLoop-->
                    <!--                                               id="DoubleLoop1"-->
                    <!--                                               style="width: 400px;height: 200px"-->
                    <!--                                       ></DoubleLoop>-->
                    <DoubleLoop :tableData="DoubleLoopData" id="DoubleLoop2" style="width: 400px;height: 200px"></DoubleLoop>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="realShowAreaItem">
            <div>
              <img src="../assets/LargeScreen/product.png" alt="">
            </div>
            <div class="table3">
              <dv-scroll-board :config="LargeScreenConfig"
                               style="width:100%;height:510px"
                               :hoverPause="true"
                               waitTime="1000"
                               align="center"
              />
<!--              <VonLargeScreenTable :tableData="dailyReport"></VonLargeScreenTable>-->
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="lineStep">
            <img src="../assets/LargeScreen/capacity.png" alt="">
            <div class="lineStepBox">
              <BarChart id="barCharts1"></BarChart>
            </div>
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getHelpInfos, getDailyReport } from "../api/workStation/handle";
import { getRecipeCurrent } from "../api/workStation/login";

export default {
  name: "LargeScreen",
  data() {
    return {
      LargeScreenConfig:{
      },
      isShow_Popup_BDU:false,
      currentTime: "",
      currentDate: "",
      helpInfos: [],
      dailyReport: [],
      DoubleLoopData: [
        { value: 1735, name: "Direct" },
        { value: 580, name: "Email" }
      ],
      chartData: {
        id: 111111111,
        ele: "ech_11111111",
        activeFlg: false,
        chartTitle: "指标名称",
        legend: [{ name: "目标值", value: 90 }, { name: "完成值", value: 56 }],
        targetVal: 90,
        completeVal: 56
      },
      reportTimer: null,
      helpTimer: null,
      productName: ""
    };
  },
  methods: {
    cancelResult_BDU(){
      this.isShow_Popup_BDU = false;
    },
    commitResult_BDU(){
      this.isShow_Popup_BDU = false;
    },
    getWeatherAndTime() {
      let That = this;
      let timer = setInterval(() => {
        That.currentDate = That.$moment().format("YYYY-MM-DD");
        That.currentTime = That.$moment().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
      this.$once("hook:beforeDestroy", () => {
        clearInterval(timer);
        timer = null;
      });
    },
    Timers() {
      this.helpTimer = setInterval(() => {
        getHelpInfos().then(res => {
          this.helpInfos = res.data;
        });
      }, 3000);
      this.reportTimer = setInterval(() => {
        this.getReport();
      }, 30000);
    },
    getRecipeCurrentMethod() {
      getRecipeCurrent().then(res => {
        this.productName = res.data.productName;
      });
    },
    getReport() {
      getDailyReport().then(res => {
        let list = res.data;
        list.forEach(d => {
          d.diff = (d.ngNum / d.workStationOrderNum * 100).toFixed(2) + "%";
        });
        let formatTable = list.map(item=>{
          return [item.workStationName,item.workStationOrderNum,item.diff,item.outTimeCount]
        });
        this.LargeScreenConfig = {
          header: ['工站号', '生产数量', '不良率','超时计数次数'],
          rowNum:8,
          data: formatTable,
          align: ['center'],
          columnWidth:[232,232,232,232]
        }
      });
    }
  },
  beforeDestroy() {
    window.clearInterval(this.reportTimer);
    this.reportTimer = null;
    window.clearInterval(this.helpTimer);
    this.helpTimer = null;
  },
  created() {
    this.getRecipeCurrentMethod();
    this.getReport();
    this.Timers();
    this.getWeatherAndTime();
  },
  computed: {}
};
</script>

<style scoped lang="scss">
.LargeScreen {
  width: 100vw;
  height: 100vh;
  background: #000000;
  .topTitle {
    width: 100%;
    height: 90px;
    position: relative;
    .Logo {
      position: absolute;
      top: 15px;
      left: 10px;
      height: 45px;
    }
    .backTop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .realTime {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scale(0.8);
    }
    .weather {
      position: absolute;
      top: 16px;
      right: 30px;
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
    }
    .von_sw {
      color: white;
      font-size: 36px;
      display: inline-block;
      width: 80px;
      text-align: center;
    }
  }
  .content {
    font-size: 30px;
    font-weight: bold;
    color: white;
    width: 100vw;
    height: 60px;
    background: linear-gradient(180deg, #4e67b8, #012154);
  }
  .realShowArea {
    width: 100vw;
    .lineStep {
      margin-top: 10px;
      padding: 10px 30px;
      .lineStepBox {
        overflow: hidden;
        transform: translateY(-4px);
        width: 100%;
        height: 290px;
        background: rgba(0, 108, 255, 0.2);
        border: 1px solid #8096ba;
      }
    }
    .realShowAreaItem {
      padding-top: 10px;
      height: 550px;
      .table3 {
        transform: translateY(-4px);
        width: 930px;
        border: 1px solid #8096ba;
      }
      .realShowAreaItemTop {
        margin: 0 30px 10px;
        width: 900px;
        height: 256px;
        .tableBox{
          height: 214px;
          .table {
            height: 214px;
            transform: translateY(-4px);
            background: rgba(0, 108, 255, 0.2);
            border: 1px solid #8096ba;
          }
        }
      }
      .realShowAreaItemBottom {
        width: 100%;
        height: 270px;
        display: flex;
        justify-content: space-evenly;
        .tableBox {
          .table {
            transform: translateY(-4px);
            width: 435px;
            height: 250px;
            background: rgba(0, 108, 255, 0.2);
            border: 1px solid #8096ba;
          }
          .table1 {
            display: flex;
            justify-content: center;
            align-items: center;
            .trans {
              padding-top: 20px;
              padding-left: 18%;
              font-size: 20px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: white;
              z-index: -1;
              transform: translate(-80px, -10px);
              width: 364px;
              height: 95px;
              background: linear-gradient(
                90deg,
                rgba(149, 4, 2, 0.6),
                rgba(149, 4, 2, 0)
              );
            }
          }
          .table2 {
            .table2Top {
              width: 100%;
              height: 60px;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              font-size: 26px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #00fff6;
              background: rgba(41, 135, 207, 0.5);
            }
            .table2Bottom {
              display: flex;
              align-items: center;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
